<template>
  <div>
    <nav-bar>
      <template v-slot:center>
        <span style="font-size: 0.16rem; color: #fff">{{ title }}</span>
      </template>
    </nav-bar>
    <van-address-edit
      :addressInfo="addressInfo"
      :area-list="areaList"
      :show-delete="$route.query.type === 'edit'"
      show-set-default
      show-search-result
      area-placeholder="选择省 / 市 / 区"
      :area-columns-placeholder="['请选择', '请选择', '请选择']"
      @save="onSave"
      @delete="onDelete"
    />
  </div>
</template>

<script>
import UseTabBar from 'hooks/tabbar/UseTabBar'
import { ref, onMounted, reactive } from 'vue'
import { Toast } from 'vant'
import { areaList } from '@vant/area-data'
import { addAddress, editAddress, deleteAddress, getAddressDetail } from 'network/address'
import { useRouter, useRoute } from 'vue-router'
export default {
  name: 'EditAddress',
  setup() {
    UseTabBar()
    // 默认信息
    let addressInfo = reactive({
      name: '',
      tel: '',
      city: '',
      county: '',
      country: '',
      province: '',
      areaCode: '',
      isDefault: false,
      postalCode: '',
      addressDetail: ''
    })
    // 展示新增地址还是修改地址
    let title = ref('新增地址')
    // 生成路由实例
    const router = useRouter()
    // 生成当前的路由实例
    const route = useRoute()
    // 点击保存按钮产生的回调
    const onSave = ({ name, addressDetail, tel, province, city, county, isDefault }) => {
      console.log(!!isDefault)
      // 生成要携带的参数
      const params = {
        name,
        address: addressDetail,
        phone: tel,
        province,
        city,
        county,
        is_default: isDefault ? 1 : 0
      }

      if (route.query.type === 'add') {
        // 添加详细地址
        addAddress(params).then(res => {
          if (res.status === 201) {
            Toast('添加地址成功')
            setTimeout(() => {
              router.go(-1)
            }, 1000)
          } else {
            Toast('添加地址失败')
          }
        })
      } else {
        // 修改详细地址
        editAddress(route.query.addressId, params).then(res => {
          if (res.status === 204) {
            Toast('修改地址成功')
            setTimeout(() => {
              router.go(-1)
            }, 1000)
          } else {
            Toast('修改地址失败')
          }
        })
      }
    }
    // 挂载的时候判断是什么类型(新增还是修改)
    onMounted(() => {
      if (route.query.type === 'add') {
        title.value = '新增地址'
      } else {
        title.value = '修改地址'
        getAddressDetail(route.query.addressId).then(res => {
          // 如果这个k对应的值存在 就赋值
          for (let k in addressInfo) {
            if (res[k]) addressInfo[k] = res[k]
          }

          Object.entries(areaList.county_list).forEach(([countyId, county]) => {
            // 找到当前对应的区
            if (county === res.county) {
              //找到对应的市
              const [cityItem] = Object.entries(areaList.city_list).filter(
                ([cityId, city]) => cityId.substr(0, 4) === countyId.substr(0, 4)
              )
              // 找到对应的省
              const [provinceItem] = Object.entries(areaList.province_list).filter(
                ([provinceId, province]) => provinceId.substr(0, 2) === countyId.substr(0, 2)
              )
              if (res.city === cityItem[1] && res.province === provinceItem[1]) {
                addressInfo.areaCode = countyId
              }
            }
          })

          addressInfo.tel = res.phone
          addressInfo.isDefault = !!res.is_default
          addressInfo.addressDetail = res.address
        })
      }
    })
    // 删除地址
    const onDelete = () => {
      deleteAddress(route.query.addressId).then(res => {
        if (res.status === 204) {
          Toast('删除地址成功')
          setTimeout(() => {
            router.go(-1)
          })
        } else {
          Toast('删除地址失败')
        }
      })
    }

    return {
      onSave,
      onDelete,
      areaList,
      title,
      addressInfo
    }
  }
}
</script>

<style lang="scss" scoped>
</style>